<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.22
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-->
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Form elements - Tabler - Premium and Open Source dashboard template with responsive and high quality
        UI.</title>
    <!-- CSS files -->
    <link href="../dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
    <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
    <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
    <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<div class="page">
    <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
                <span class="navbar-toggler-icon"></span>
            </button>
            <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
                <a href="..">
                    <img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
                </a>
            </h1>
            <div class="navbar-nav flex-row order-md-last">
                <div class="nav-item dropdown d-none d-md-flex me-3">
                    <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1"
                       aria-label="Show notifications">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                             stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                             stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"/>
                            <path d="M9 17v1a3 3 0 0 0 6 0v-1"/>
                        </svg>
                        <span class="badge bg-red"></span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end dropdown-menu-card">
                        <div class="card">
                            <div class="card-body">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur
                                exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet
                                debitis et magni maxime necessitatibus ullam.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown"
                       aria-label="Open user menu">
                        <span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
                        <div class="d-none d-xl-block ps-2">
                            <div>Paweł Kuna</div>
                            <div class="mt-1 small text-muted">UI Designer</div>
                        </div>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                        <a href="#" class="dropdown-item">Set status</a>
                        <a href="#" class="dropdown-item">Profile & account</a>
                        <a href="#" class="dropdown-item">Feedback</a>
                        <div class="dropdown-divider"></div>
                        <a href="#" class="dropdown-item">Settings</a>
                        <a href="#" class="dropdown-item">Logout</a>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="navbar-expand-md">
        <div class="collapse navbar-collapse" id="navbar-menu">
            <div class="navbar navbar-light">
                <div class="container-xl">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="../index.html">
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                 class="icon" width="24" height="24"
                                                                                 viewBox="0 0 24 24" stroke-width="2"
                                                                                 stroke="currentColor" fill="none"
                                                                                 stroke-linecap="round"
                                                                                 stroke-linejoin="round"><path
                            stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12"/><path
                            d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"/><path
                            d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"/></svg>
                    </span>
                                <span class="nav-link-title">
                      Home
                    </span>
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown"
                               role="button" aria-expanded="false">
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                 class="icon" width="24" height="24"
                                                                                 viewBox="0 0 24 24" stroke-width="2"
                                                                                 stroke="currentColor" fill="none"
                                                                                 stroke-linecap="round"
                                                                                 stroke-linejoin="round"><path
                            stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline
                            points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3"/><line x1="12" y1="12" x2="20"
                                                                                        y2="7.5"/><line x1="12" y1="12"
                                                                                                        x2="12"
                                                                                                        y2="21"/><line
                            x1="12" y1="12" x2="4" y2="7.5"/><line x1="16" y1="5.25" x2="8" y2="9.75"/></svg>
                    </span>
                                <span class="nav-link-title">
                      Interface
                    </span>
                            </a>
                            <div class="dropdown-menu">
                                <div class="dropdown-menu-columns">
                                    <div class="dropdown-menu-column">
                                        <a class="dropdown-item" href="../empty.html">
                                            Empty page
                                        </a>
                                        <a class="dropdown-item" href="../accordion.html">
                                            Accordion
                                        </a>
                                        <a class="dropdown-item" href="../blank.html">
                                            Blank page
                                        </a>
                                        <a class="dropdown-item" href="../buttons.html">
                                            Buttons
                                        </a>
                                        <a class="dropdown-item" href="../cards.html">
                                            Cards
                                        </a>
                                        <a class="dropdown-item" href="../cards-masonry.html">
                                            Cards Masonry
                                        </a>
                                        <a class="dropdown-item" href="../colors.html">
                                            Colors
                                        </a>
                                        <a class="dropdown-item" href="../dropdowns.html">
                                            Dropdowns
                                        </a>
                                        <a class="dropdown-item" href="../icons.html">
                                            Icons
                                        </a>
                                        <a class="dropdown-item" href="../modals.html">
                                            Modals
                                        </a>
                                        <a class="dropdown-item" href="../maps.html">
                                            Maps
                                        </a>
                                        <a class="dropdown-item" href="../map-fullsize.html">
                                            Map fullsize
                                        </a>
                                        <a class="dropdown-item" href="../maps-vector.html">
                                            Vector maps
                                        </a>
                                        <a class="dropdown-item" href="../navigation.html">
                                            Navigation
                                        </a>
                                    </div>
                                    <div class="dropdown-menu-column">
                                        <a class="dropdown-item" href="../charts.html">
                                            Charts
                                        </a>
                                        <a class="dropdown-item" href="../charts-heatmap.html">
                                            Charts heatmap
                                        </a>
                                        <a class="dropdown-item" href="../pagination.html">
                                            Pagination
                                        </a>
                                        <a class="dropdown-item" href="../skeleton.html">
                                            Skeleton
                                        </a>
                                        <a class="dropdown-item" href="../tabs.html">
                                            Tabs
                                        </a>
                                        <a class="dropdown-item" href="../tables.html">
                                            Tables
                                        </a>
                                        <a class="dropdown-item" href="../carousel.html">
                                            Carousel
                                        </a>
                                        <a class="dropdown-item" href="../lists.html">
                                            Lists
                                        </a>
                                        <a class="dropdown-item" href="../typography.html">
                                            Typography
                                        </a>
                                        <a class="dropdown-item" href="../page-headers.html">
                                            Page headers
                                        </a>
                                        <a class="dropdown-item" href="../markdown.html">
                                            Markdown
                                        </a>
                                        <div class="dropend">
                                            <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication"
                                               data-bs-toggle="dropdown" role="button" aria-expanded="false">
                                                Authentication
                                            </a>
                                            <div class="dropdown-menu">
                                                <a href="../sign-in.html" class="dropdown-item">Sign in</a>
                                                <a href="../sign-up.html" class="dropdown-item">Sign up</a>
                                                <a href="../forgot-password.html" class="dropdown-item">Forgot
                                                    password</a>
                                                <a href="../terms-of-service.html" class="dropdown-item">Terms of
                                                    service</a>
                                                <a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
                                            </div>
                                        </div>
                                        <div class="dropend">
                                            <a class="dropdown-item dropdown-toggle" href="#sidebar-error"
                                               data-bs-toggle="dropdown" role="button" aria-expanded="false">
                                                Error pages
                                            </a>
                                            <div class="dropdown-menu">
                                                <a href="../error-404.html" class="dropdown-item">404 page</a>
                                                <a href="../error-500.html" class="dropdown-item">500 page</a>
                                                <a href="../error-maintenance.html" class="dropdown-item">Maintenance
                                                    page</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="../form-elements.html">
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                 class="icon" width="24" height="24"
                                                                                 viewBox="0 0 24 24" stroke-width="2"
                                                                                 stroke="currentColor" fill="none"
                                                                                 stroke-linecap="round"
                                                                                 stroke-linejoin="round"><path
                            stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6"/><path
                            d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9"/></svg>
                    </span>
                                <span class="nav-link-title">
                      Form elements
                    </span>
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown"
                               role="button" aria-expanded="false">
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                 class="icon" width="24" height="24"
                                                                                 viewBox="0 0 24 24" stroke-width="2"
                                                                                 stroke="currentColor" fill="none"
                                                                                 stroke-linecap="round"
                                                                                 stroke-linejoin="round"><path
                            stroke="none" d="M0 0h24v24H0z" fill="none"/><path
                            d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"/></svg>
                    </span>
                                <span class="nav-link-title">
                      Extra
                    </span>
                            </a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="../activity.html">
                                    Activity
                                </a>
                                <a class="dropdown-item" href="../gallery.html">
                                    Gallery
                                </a>
                                <a class="dropdown-item" href="../invoice.html">
                                    Invoice
                                </a>
                                <a class="dropdown-item" href="../search-results.html">
                                    Search results
                                </a>
                                <a class="dropdown-item" href="../pricing.html">
                                    Pricing cards
                                </a>
                                <a class="dropdown-item" href="../users.html">
                                    Users
                                </a>
                                <a class="dropdown-item" href="../license.html">
                                    License
                                </a>
                                <a class="dropdown-item" href="../music.html">
                                    Music
                                </a>
                                <a class="dropdown-item" href="../widgets.html">
                                    Widgets
                                </a>
                                <a class="dropdown-item" href="../wizard.html">
                                    Wizard
                                </a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown"
                               role="button" aria-expanded="false">
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                 class="icon" width="24" height="24"
                                                                                 viewBox="0 0 24 24" stroke-width="2"
                                                                                 stroke="currentColor" fill="none"
                                                                                 stroke-linecap="round"
                                                                                 stroke-linejoin="round"><path
                            stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2"/><rect
                            x="4" y="13" width="6" height="7" rx="2"/><rect x="14" y="4" width="6" height="7" rx="2"/><rect
                            x="14" y="15" width="6" height="5" rx="2"/></svg>
                    </span>
                                <span class="nav-link-title">
                      Layout
                    </span>
                            </a>
                            <div class="dropdown-menu">
                                <div class="dropdown-menu-columns">
                                    <div class="dropdown-menu-column">
                                        <a class="dropdown-item" href="../layout-horizontal.html">
                                            Horizontal
                                        </a>
                                        <a class="dropdown-item" href="../layout-vertical.html">
                                            Vertical
                                        </a>
                                        <a class="dropdown-item" href="../layout-vertical-transparent.html">
                                            Vertical transparent
                                        </a>
                                        <a class="dropdown-item" href="../layout-vertical-right.html">
                                            Right vertical
                                        </a>
                                        <a class="dropdown-item" href="../layout-condensed.html">
                                            Condensed
                                        </a>
                                        <a class="dropdown-item" href="../layout-condensed-dark.html">
                                            Condensed dark
                                        </a>
                                        <a class="dropdown-item" href="../layout-combo.html">
                                            Combined
                                        </a>
                                    </div>
                                    <div class="dropdown-menu-column">
                                        <a class="dropdown-item" href="../layout-navbar-dark.html">
                                            Navbar dark
                                        </a>
                                        <a class="dropdown-item" href="../layout-navbar-sticky.html">
                                            Navbar sticky
                                        </a>
                                        <a class="dropdown-item" href="../layout-navbar-overlap.html">
                                            Navbar overlap
                                        </a>
                                        <a class="dropdown-item" href="../layout-dark.html">
                                            Dark mode
                                        </a>
                                        <a class="dropdown-item" href="../layout-rtl.html">
                                            RTL mode
                                        </a>
                                        <a class="dropdown-item" href="../layout-fluid.html">
                                            Fluid
                                        </a>
                                        <a class="dropdown-item" href="../layout-fluid-vertical.html">
                                            Fluid vertical
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="../docs/index.html">
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                 class="icon" width="24" height="24"
                                                                                 viewBox="0 0 24 24" stroke-width="2"
                                                                                 stroke="currentColor" fill="none"
                                                                                 stroke-linecap="round"
                                                                                 stroke-linejoin="round"><path
                            stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path
                            d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"/><line x1="9"
                                                                                                              y1="9"
                                                                                                              x2="10"
                                                                                                              y2="9"/><line
                            x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/></svg>
                    </span>
                                <span class="nav-link-title">
                      Documentation
                    </span>
                            </a>
                        </li>
                    </ul>
                    <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                        <form action="." method="get">
                            <div class="input-icon">
                    <span class="input-icon-addon">
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                           stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                           stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10"
                                                                                                              cy="10"
                                                                                                              r="7"/><line
                              x1="21" y1="21" x2="15" y2="15"/></svg>
                    </span>
                                <input type="text" class="form-control" placeholder="Search…"
                                       aria-label="Search in website">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="container-xl">
            <!-- Page title -->
            <div class="page-header d-print-none">
                <div class="row align-items-center">
                    <div class="col">
                        <h2 class="page-title">
                            Documentation
                        </h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="d-none d-lg-block col-lg-3">
                    <ul class="nav nav-vertical">
                        <li class="nav-item">
                            <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
                                                                                   fill="none"/><path
                            d="M8 9l3 3l-3 3"/><line x1="13" y1="15" x2="16" y2="15"/><rect x="4" y="4" width="16"
                                                                                            height="16" rx="4"/></svg>
                    </span>
                                Getting started
                                <span class="nav-link-toggle"></span>
                            </a>
                            <ul class="nav nav-pills collapse" id="menu-base">
                                <li class="nav-item">
                                    <a href="../docs/index.html" class="nav-link">
                                        Introduction
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/usage.html" class="nav-link">
                                        Usage
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/colors.html" class="nav-link">
                                        Colors
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/typography.html" class="nav-link">
                                        Typography
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/icons.html" class="nav-link">
                                        Icons
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
                                                                                   fill="none"/><path
                            d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1"/></svg>
                    </span>
                                Components
                                <span class="nav-link-toggle"></span>
                            </a>
                            <ul class="nav nav-pills collapse show" id="menu-components">
                                <li class="nav-item">
                                    <a href="../docs/alerts.html" class="nav-link">
                                        Alerts
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/avatars.html" class="nav-link">
                                        Avatars
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/badges.html" class="nav-link">
                                        Badges
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/breadcrumb.html" class="nav-link">
                                        Breadcrumb
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/buttons.html" class="nav-link">
                                        Buttons
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/cards.html" class="nav-link">
                                        Cards
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/carousel.html" class="nav-link">
                                        Carousel
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/dropdowns.html" class="nav-link">
                                        Dropdowns
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/divider.html" class="nav-link">
                                        Divider
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/empty.html" class="nav-link">
                                        Empty states
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/form-elements.html" class="nav-link active">
                                        Form elements
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/form-helpers.html" class="nav-link">
                                        Form helpers
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/modals.html" class="nav-link">
                                        Modals
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/page-headers.html" class="nav-link">
                                        Page headers
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/progress.html" class="nav-link">
                                        Progress
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/range-slider.html" class="nav-link">
                                        Range slider
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/ribbons.html" class="nav-link">
                                        Ribbons
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/skeleton.html" class="nav-link">
                                        Skeleton
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/spinners.html" class="nav-link">
                                        Spinners
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/steps.html" class="nav-link">
                                        Steps
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/switch-icon.html" class="nav-link">
                                        Switch icon
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/tables.html" class="nav-link">
                                        Tables
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/tabs.html" class="nav-link">
                                        Tabs
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/timelines.html" class="nav-link">
                                        Timelines
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/toasts.html" class="nav-link">
                                        Toasts
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/tooltips.html" class="nav-link">
                                        Tooltips
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
                                                                                   fill="none"/><path
                            d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z"/></svg>
                    </span>
                                Utilities
                                <span class="nav-link-toggle"></span>
                            </a>
                            <ul class="nav nav-pills collapse" id="menu-utils">
                                <li class="nav-item">
                                    <a href="../docs/cursors.html" class="nav-link">
                                        Cursors
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
                                                                                   fill="none"/><rect x="4" y="4"
                                                                                                      width="6"
                                                                                                      height="6"
                                                                                                      rx="1"/><rect
                            x="4" y="14" width="6" height="6" rx="1"/><rect x="14" y="14" width="6" height="6" rx="1"/><line
                            x1="14" y1="7" x2="20" y2="7"/><line x1="17" y1="4" x2="17" y2="10"/></svg>
                    </span>
                                Plugins
                                <span class="nav-link-toggle"></span>
                            </a>
                            <ul class="nav nav-pills collapse" id="menu-plugins">
                                <li class="nav-item">
                                    <a href="../docs/autosize.html" class="nav-link">
                                        Autosize
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/input-mask.html" class="nav-link">
                                        Form input mask
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/flags.html" class="nav-link">
                                        Flags
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/payments.html" class="nav-link">
                                        Payments
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../docs/charts.html" class="nav-link">
                                        Charts
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a href="../changelog.html" class="nav-link">
                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                     height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
                                                                                   fill="none"/><circle cx="7" cy="18"
                                                                                                        r="2"/><circle
                            cx="7" cy="6" r="2"/><circle cx="17" cy="6" r="2"/><line x1="7" y1="8" x2="7" y2="16"/><path
                            d="M9 18h6a2 2 0 0 0 2 -2v-5"/><polyline points="14 14 17 11 20 14"/></svg>
                    </span>
                                Changelog
                                <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.22</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-9">
                    <div class="card card-lg">
                        <div class="card-body">
                            <div class="markdown">
                                <div>
                                    <div class="d-flex mb-4">
                                        <h1 class="mt-0">Form elements</h1>
                                        <p class="ms-auto">
                                            <a href="https://getbootstrap.com/docs/4.4/components/forms/"
                                               target="_blank">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon pe-1 text-blue"
                                                     width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
                                                     stroke="currentColor" fill="none" stroke-linecap="round"
                                                     stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5"/>
                                                    <line x1="10" y1="14" x2="20" y2="4"/>
                                                    <polyline points="15 4 20 4 20 9"/>
                                                </svg>
                                                Bootstrap documentation
                                            </a>
                                        </p>
                                    </div>
                                    <p>Forms are one of the most important types of interaction with a website or app.
                                        Since their aim is to enable users to make a purchase, subscribe to a service or
                                        sign up to create an account, it's important to make sure they are easy to
                                        complete and help increase conversion rates. Use the available elements to
                                        create forms which are well-structured and user-friendly.</p>
                                </div>
                                <h2 id="classic-inputs">Classic inputs</h2>
                                <p>Use classic, user-friendly inputs, label them appropriately and include input
                                    placeholders that will help users avoid confusion when completing a form.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <label class="form-label">Text</label>
                                            <input type="text" class="form-control" name="example-text-input"
                                                   placeholder="Input placeholder"/>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Password</label>
                                            <input type="text" class="form-control" name="example-password-input"
                                                   placeholder="Input placeholder"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Text<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span class="s">"form-control"</span> <span
                                    class="na">name=</span><span class="s">"example-text-input"</span> <span class="na">placeholder=</span><span
                                    class="s">"Input placeholder"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Password<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span class="s">"form-control"</span> <span
                                    class="na">name=</span><span class="s">"example-password-input"</span> <span
                                    class="na">placeholder=</span><span class="s">"Input placeholder"</span><span
                                    class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="form-control-rounded">Form control rounded</h2>
                                <p>Use the <code
                                        class="language-plaintext highlighter-rouge">form-control-rounded</code> class
                                    if you prefer form controls with rounded corners.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <label class="form-label">Form control rounded</label>
                                            <input type="text" class="form-control form-control-rounded mb-2"
                                                   name="Form control rounded" placeholder="Text.."/>
                                            <div class="input-icon">
                                                <input type="text" class="form-control form-control-rounded"
                                                       placeholder="Search…"/>
                                                <span class="input-icon-addon">
                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                   viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                   stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
                                                                                        fill="none"/><circle cx="10"
                                                                                                             cy="10"
                                                                                                             r="7"/><line
                                      x1="21" y1="21" x2="15" y2="15"/></svg>
                            </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Form control rounded<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span
                                    class="s">"form-control form-control-rounded mb-2"</span> <span
                                    class="na">name=</span><span class="s">"Form control rounded"</span> <span
                                    class="na">placeholder=</span><span class="s">"Text.."</span><span
                                    class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-icon"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span
                                    class="s">"form-control form-control-rounded"</span> <span
                                    class="na">placeholder=</span><span class="s">"Search…"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-icon-addon"</span><span
                                    class="nt">&gt;</span>
      <span class="c">&lt;!-- SVG icon code --&gt;</span>
    <span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="form-control-flush">Form control flush</h2>
                                <p>You can remove borders from your form control by adding the <code
                                        class="language-plaintext highlighter-rouge">form-control-flush</code> class.
                                </p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <label class="form-label">Form control flush</label>
                                            <input type="text" class="form-control form-control-flush"
                                                   name="Form control flush" placeholder="Text.."/>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Form control flush<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span
                                    class="s">"form-control form-control-flush"</span> <span
                                    class="na">name=</span><span class="s">"Form control flush"</span> <span class="na">placeholder=</span><span
                                    class="s">"Text.."</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="input-with-icon">Input with icon</h2>
                                <p>Add icons to your input controls to suggest users what they should enter or inform
                                    them of the current state of a form element.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <label class="form-label">Icon input</label>
                                            <div class="input-icon mb-3">
                                                <input type="text" class="form-control" placeholder="Search…"/>
                                                <span class="input-icon-addon">
                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                   viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                   stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
                                                                                        fill="none"/><circle cx="10"
                                                                                                             cy="10"
                                                                                                             r="7"/><line
                                      x1="21" y1="21" x2="15" y2="15"/></svg>
                            </span>
                                            </div>
                                            <div class="input-icon mb-3">
                            <span class="input-icon-addon">
                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                   viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                   stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
                                                                                        fill="none"/><circle cx="12"
                                                                                                             cy="7"
                                                                                                             r="4"/><path
                                      d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/></svg>
                            </span>
                                                <input type="text" class="form-control" placeholder="Username"/>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Loader input</label>
                                            <div class="input-icon mb-3">
                                                <input type="text" class="form-control" placeholder="Loading…"/>
                                                <span class="input-icon-addon">
                              <div class="spinner-border spinner-border-sm text-muted" role="status"></div>
                            </span>
                                            </div>
                                            <div class="input-icon mb-3">
                            <span class="input-icon-addon">
                              <div class="spinner-border spinner-border-sm text-muted" role="status"></div>
                            </span>
                                                <input type="text" class="form-control" placeholder="Loading…"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Icon input<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-icon mb-3"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span
                                    class="s">"Search…"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-icon-addon"</span><span
                                    class="nt">&gt;</span>
      <span class="c">&lt;!-- SVG icon code --&gt;</span>
    <span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-icon mb-3"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-icon-addon"</span><span
                                    class="nt">&gt;</span>
      <span class="c">&lt;!-- SVG icon code --&gt;</span>
    <span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span
                                    class="s">"Username"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Loader input<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-icon mb-3"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span
                                    class="s">"Loading…"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-icon-addon"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"spinner-border spinner-border-sm text-muted"</span> <span
                                    class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/div&gt;</span>
    <span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-icon mb-3"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-icon-addon"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"spinner-border spinner-border-sm text-muted"</span> <span
                                    class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/div&gt;</span>
    <span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span
                                    class="s">"Loading…"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="separated-inputs">Separated inputs</h2>
                                <p>Include an additional element in your input section, such as a button which can be
                                    used to submit the information enetered in the input control.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <label class="form-label">Separated inputs</label>
                                            <div class="row g-2">
                                                <div class="col">
                                                    <input type="text" class="form-control" placeholder="Search for…"/>
                                                </div>
                                                <div class="col-auto">
                                                    <a href="javascript:void(0)" class="btn btn-white btn-icon"
                                                       aria-label="Button">
                                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                             height="24" viewBox="0 0 24 24" stroke-width="2"
                                                             stroke="currentColor" fill="none" stroke-linecap="round"
                                                             stroke-linejoin="round">
                                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                            <circle cx="10" cy="10" r="7"/>
                                                            <line x1="21" y1="21" x2="15" y2="15"/>
                                                        </svg>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Separated inputs<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row g-2"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span
                                    class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search for…"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"btn btn-white btn-icon"</span> <span
                                    class="na">aria-label=</span><span class="s">"Button"</span><span
                                    class="nt">&gt;</span>
        <span class="c">&lt;!-- SVG icon code --&gt;</span>
      <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="textarea-and-select">Textarea and select</h2>
                                <p>Use a multi-line text input control to enable users to enter longer pieces of text.
                                    The control will automatically adjust to the length of the text entered.</p>
                                <p>Add one of the available selects - either a dropdown or a multiple choice select - to
                                    let users choose from a predefined set of options.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <label class="form-label">Textarea</label>
                                            <textarea class="form-control" name="example-textarea"
                                                      placeholder="Textarea placeholder"></textarea>
                                        </div>
                                        <div class="mb-3">
                                            <div class="form-label">Select</div>
                                            <select class="form-select">
                                                <option value="1">One</option>
                                                <option value="2">Two</option>
                                                <option value="3">Three</option>
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <div class="form-label">Select multiple</div>
                                            <select class="form-select" multiple="">
                                                <option value="1">One</option>
                                                <option value="2">Two</option>
                                                <option value="3">Three</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Textarea<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;textarea</span> <span class="na">class=</span><span class="s">"form-control"</span> <span
                                    class="na">name=</span><span class="s">"example-textarea"</span> <span class="na">placeholder=</span><span
                                    class="s">"Textarea placeholder"</span><span class="nt">&gt;&lt;/textarea&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-label"</span><span
                                    class="nt">&gt;</span>Select<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;select</span> <span class="na">class=</span><span class="s">"form-select"</span> <span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1"</span><span
                                    class="nt">&gt;</span>One<span class="nt">&lt;/option&gt;</span>
    <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"2"</span><span
                                    class="nt">&gt;</span>Two<span class="nt">&lt;/option&gt;</span>
    <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"3"</span><span
                                    class="nt">&gt;</span>Three<span class="nt">&lt;/option&gt;</span>
  <span class="nt">&lt;/select&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-label"</span><span
                                    class="nt">&gt;</span>Select multiple<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;select</span> <span class="na">class=</span><span class="s">"form-select"</span>  <span
                                    class="na">multiple</span><span class="nt">&gt;</span>
    <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1"</span><span
                                    class="nt">&gt;</span>One<span class="nt">&lt;/option&gt;</span>
    <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"2"</span><span
                                    class="nt">&gt;</span>Two<span class="nt">&lt;/option&gt;</span>
    <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"3"</span><span
                                    class="nt">&gt;</span>Three<span class="nt">&lt;/option&gt;</span>
  <span class="nt">&lt;/select&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="validation-states">Validation states</h2>
                                <p>To inform users whether the entered value is correct or not, use either of the
                                    validation states. Thanks to that, users will immediately know which form elements
                                    they need to correct and, if the state displays as invalid, why the value is
                                    incorrect.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <label class="form-label">Validation States</label>
                                            <input type="text" class="form-control is-valid mb-2"
                                                   placeholder="Valid State.."/>
                                            <input type="text" class="form-control is-invalid"
                                                   placeholder="Invalid State.."/>
                                            <div class="invalid-feedback">Invalid feedback</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Validation States<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span class="s">"form-control is-valid mb-2"</span> <span
                                    class="na">placeholder=</span><span class="s">"Valid State.."</span><span
                                    class="nt">&gt;</span>
  <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span class="s">"form-control is-invalid"</span> <span
                                    class="na">placeholder=</span><span class="s">"Invalid State.."</span><span
                                    class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span
                                    class="nt">&gt;</span>Invalid feedback<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h3 id="subtle-validation-states">Subtle validation states</h3>
                                <p>If you prefer a more subtle manner of informing users of the input control validation
                                    state, you can use tick and cross symbols and resign from colored control frames and
                                    the validation feedback.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <label class="form-label">Validation States</label>
                                            <input type="text" class="form-control is-valid is-valid-lite mb-2"
                                                   placeholder="Valid State.."/>
                                            <input type="text" class="form-control is-invalid is-invalid-lite"
                                                   placeholder="Invalid State.."/>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Validation States<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span
                                    class="s">"form-control is-valid is-valid-lite mb-2"</span> <span class="na">placeholder=</span><span
                                    class="s">"Valid State.."</span><span class="nt">&gt;</span>
  <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span
                                    class="s">"form-control is-invalid is-invalid-lite"</span> <span class="na">placeholder=</span><span
                                    class="s">"Invalid State.."</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="input-size">Input size</h2>
                                <p>Choose the size of an input control that will go well with your form design. Apart
                                    from the default size, you can also use small and large input controls.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <label class="form-label">Input sizing</label>
                                            <input class="form-control form-control-lg mb-2" type="text"
                                                   placeholder=".form-control-lg"/>
                                            <input class="form-control mb-2" type="text" placeholder="Default input"/>
                                            <input class="form-control form-control-sm" type="text"
                                                   placeholder=".form-control-sm"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Input sizing<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;input</span> <span class="na">class=</span><span
                                    class="s">"form-control form-control-lg mb-2"</span> <span
                                    class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">placeholder=</span><span class="s">".form-control-lg"</span><span
                                    class="nt">&gt;</span>
  <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control mb-2"</span> <span
                                    class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">placeholder=</span><span class="s">"Default input"</span><span
                                    class="nt">&gt;</span>
  <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control form-control-sm"</span> <span
                                    class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">placeholder=</span><span class="s">".form-control-sm"</span><span
                                    class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="image-check">Image check</h2>
                                <p>Add an image check to your form and give users visually attractive options to choose
                                    from.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div style="max-width: 25rem">
                                            <div class="mb-3">
                                                <label class="form-label">Image Check</label>
                                                <div class="row g-2">
                                                    <div class="col-6 col-sm-4">
                                                        <label class="form-imagecheck mb-2">
                                                            <input name="form-imagecheck" type="checkbox" value="1"
                                                                   class="form-imagecheck-input"/>
                                                            <span class="form-imagecheck-figure">
                                    <img src="../static/photos/1b73704b282a8ec6.jpg"
                                         alt="Breakfast served with tea, bread and eggs" class="form-imagecheck-image"/>
                                  </span>
                                                        </label>
                                                    </div>
                                                    <div class="col-6 col-sm-4">
                                                        <label class="form-imagecheck mb-2">
                                                            <input name="form-imagecheck" type="checkbox" value="2"
                                                                   class="form-imagecheck-input" checked=""/>
                                                            <span class="form-imagecheck-figure">
                                    <img src="../static/photos/3d2998219313cd37.jpg" alt="Book, fairy lights"
                                         class="form-imagecheck-image"/>
                                  </span>
                                                        </label>
                                                    </div>
                                                    <div class="col-6 col-sm-4">
                                                        <label class="form-imagecheck mb-2">
                                                            <input name="form-imagecheck" type="checkbox" value="3"
                                                                   class="form-imagecheck-input"/>
                                                            <span class="form-imagecheck-figure">
                                    <img src="../static/photos/6ab3200b14549f8a.jpg" alt="Healthy Dinner"
                                         class="form-imagecheck-image"/>
                                  </span>
                                                        </label>
                                                    </div>
                                                    <div class="col-6 col-sm-4">
                                                        <label class="form-imagecheck mb-2">
                                                            <input name="form-imagecheck" type="checkbox" value="4"
                                                                   class="form-imagecheck-input" checked=""/>
                                                            <span class="form-imagecheck-figure">
                                    <img src="../static/photos/6d35d9a2bd6c63c2.jpg"
                                         alt="Aperol Spritz is a cocktail consisting of prosecco, aperitif and soda water"
                                         class="form-imagecheck-image"/>
                                  </span>
                                                        </label>
                                                    </div>
                                                    <div class="col-6 col-sm-4">
                                                        <label class="form-imagecheck mb-2">
                                                            <input name="form-imagecheck" type="checkbox" value="5"
                                                                   class="form-imagecheck-input"/>
                                                            <span class="form-imagecheck-figure">
                                    <img src="../static/photos/8a26974ee6444acd.jpg"
                                         alt="Beautiful blonde woman on a wooden pier by the lake"
                                         class="form-imagecheck-image"/>
                                  </span>
                                                        </label>
                                                    </div>
                                                    <div class="col-6 col-sm-4">
                                                        <label class="form-imagecheck mb-2">
                                                            <input name="form-imagecheck" type="checkbox" value="6"
                                                                   class="form-imagecheck-input"/>
                                                            <span class="form-imagecheck-figure">
                                    <img src="../static/photos/8c13ad59f739558c.jpg"
                                         alt="Still life of mandarin oranges with leaves"
                                         class="form-imagecheck-image"/>
                                  </span>
                                                        </label>
                                                    </div>
                                                    <div class="col-6 col-sm-4">
                                                        <label class="form-imagecheck mb-2">
                                                            <input name="form-imagecheck" type="checkbox" value="7"
                                                                   class="form-imagecheck-input" checked=""/>
                                                            <span class="form-imagecheck-figure">
                                    <img src="../static/photos/8fdeb4785d2b82ef.jpg"
                                         alt="Blonde woman having a healthy snack at the wooden pier"
                                         class="form-imagecheck-image"/>
                                  </span>
                                                        </label>
                                                    </div>
                                                    <div class="col-6 col-sm-4">
                                                        <label class="form-imagecheck mb-2">
                                                            <input name="form-imagecheck" type="checkbox" value="8"
                                                                   class="form-imagecheck-input"/>
                                                            <span class="form-imagecheck-figure">
                                    <img src="../static/photos/9f36332564ca271d.jpg"
                                         alt="Woman working on a laptop while enjoying a breakfast coffee and chocolate in bed"
                                         class="form-imagecheck-image"/>
                                  </span>
                                                        </label>
                                                    </div>
                                                    <div class="col-6 col-sm-4">
                                                        <label class="form-imagecheck mb-2">
                                                            <input name="form-imagecheck" type="checkbox" value="9"
                                                                   class="form-imagecheck-input"/>
                                                            <span class="form-imagecheck-figure">
                                    <img src="../static/photos/35b88fc04a518c1b.jpg"
                                         alt="Overhead view of macarons on a marble slab"
                                         class="form-imagecheck-image"/>
                                  </span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Image Check<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row g-2"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span
                                    class="na">type=</span><span class="s">"checkbox"</span> <span
                                    class="na">value=</span><span class="s">"1"</span> <span
                                    class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span
                                    class="nt">/&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span
                                    class="na">alt=</span><span
                                    class="s">"Breakfast served with tea, bread and eggs"</span> <span
                                    class="na">class=</span><span class="s">"form-imagecheck-image"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span
                                    class="na">type=</span><span class="s">"checkbox"</span> <span
                                    class="na">value=</span><span class="s">"2"</span> <span
                                    class="na">class=</span><span class="s">"form-imagecheck-input"</span>  <span
                                    class="na">checked</span><span class="nt">/&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span
                                    class="na">alt=</span><span class="s">"Book, fairy lights"</span> <span class="na">class=</span><span
                                    class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span
                                    class="na">type=</span><span class="s">"checkbox"</span> <span
                                    class="na">value=</span><span class="s">"3"</span> <span
                                    class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span
                                    class="nt">/&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span
                                    class="na">alt=</span><span class="s">"Healthy Dinner"</span> <span class="na">class=</span><span
                                    class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span
                                    class="na">type=</span><span class="s">"checkbox"</span> <span
                                    class="na">value=</span><span class="s">"4"</span> <span
                                    class="na">class=</span><span class="s">"form-imagecheck-input"</span>  <span
                                    class="na">checked</span><span class="nt">/&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span
                                    class="na">alt=</span><span class="s">"Aperol Spritz is a cocktail consisting of prosecco, aperitif and soda water"</span> <span
                                    class="na">class=</span><span class="s">"form-imagecheck-image"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span
                                    class="na">type=</span><span class="s">"checkbox"</span> <span
                                    class="na">value=</span><span class="s">"5"</span> <span
                                    class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span
                                    class="nt">/&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span
                                    class="na">alt=</span><span class="s">"Beautiful blonde woman on a wooden pier by the lake"</span> <span
                                    class="na">class=</span><span class="s">"form-imagecheck-image"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span
                                    class="na">type=</span><span class="s">"checkbox"</span> <span
                                    class="na">value=</span><span class="s">"6"</span> <span
                                    class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span
                                    class="nt">/&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span
                                    class="na">alt=</span><span
                                    class="s">"Still life of mandarin oranges with leaves"</span> <span class="na">class=</span><span
                                    class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span
                                    class="na">type=</span><span class="s">"checkbox"</span> <span
                                    class="na">value=</span><span class="s">"7"</span> <span
                                    class="na">class=</span><span class="s">"form-imagecheck-input"</span>  <span
                                    class="na">checked</span><span class="nt">/&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span
                                    class="na">alt=</span><span class="s">"Blonde woman having a healthy snack at the wooden pier"</span> <span
                                    class="na">class=</span><span class="s">"form-imagecheck-image"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span
                                    class="na">type=</span><span class="s">"checkbox"</span> <span
                                    class="na">value=</span><span class="s">"8"</span> <span
                                    class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span
                                    class="nt">/&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span
                                    class="na">alt=</span><span class="s">"Woman working on a laptop while enjoying a breakfast coffee and chocolate in bed"</span> <span
                                    class="na">class=</span><span class="s">"form-imagecheck-image"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span
                                    class="na">type=</span><span class="s">"checkbox"</span> <span
                                    class="na">value=</span><span class="s">"9"</span> <span
                                    class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span
                                    class="nt">/&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-imagecheck-figure"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span
                                    class="na">alt=</span><span
                                    class="s">"Overhead view of macarons on a marble slab"</span> <span class="na">class=</span><span
                                    class="s">"form-imagecheck-image"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="input-color">Input color</h2>
                                <p>Your input controls can come in a variety of colors, depending on your preferences.
                                    Click <a href="./colors.html">here</a> to see the list of available colors.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <label class="form-label">Color Input</label>
                                            <div class="row g-2">
                                                <div class="col-auto">
                                                    <label class="form-colorinput">
                                                        <input name="color" type="radio" value="dark"
                                                               class="form-colorinput-input"/>
                                                        <span class="form-colorinput-color bg-dark"></span>
                                                    </label>
                                                </div>
                                                <div class="col-auto">
                                                    <label class="form-colorinput form-colorinput-light">
                                                        <input name="color" type="radio" value="white"
                                                               class="form-colorinput-input" checked=""/>
                                                        <span class="form-colorinput-color bg-white"></span>
                                                    </label>
                                                </div>
                                                <div class="col-auto">
                                                    <label class="form-colorinput">
                                                        <input name="color" type="radio" value="blue"
                                                               class="form-colorinput-input"/>
                                                        <span class="form-colorinput-color bg-blue"></span>
                                                    </label>
                                                </div>
                                                <div class="col-auto">
                                                    <label class="form-colorinput">
                                                        <input name="color" type="radio" value="azure"
                                                               class="form-colorinput-input"/>
                                                        <span class="form-colorinput-color bg-azure"></span>
                                                    </label>
                                                </div>
                                                <div class="col-auto">
                                                    <label class="form-colorinput">
                                                        <input name="color" type="radio" value="indigo"
                                                               class="form-colorinput-input"/>
                                                        <span class="form-colorinput-color bg-indigo"></span>
                                                    </label>
                                                </div>
                                                <div class="col-auto">
                                                    <label class="form-colorinput">
                                                        <input name="color" type="radio" value="purple"
                                                               class="form-colorinput-input"/>
                                                        <span class="form-colorinput-color bg-purple"></span>
                                                    </label>
                                                </div>
                                                <div class="col-auto">
                                                    <label class="form-colorinput">
                                                        <input name="color" type="radio" value="pink"
                                                               class="form-colorinput-input"/>
                                                        <span class="form-colorinput-color bg-pink"></span>
                                                    </label>
                                                </div>
                                                <div class="col-auto">
                                                    <label class="form-colorinput">
                                                        <input name="color" type="radio" value="red"
                                                               class="form-colorinput-input"/>
                                                        <span class="form-colorinput-color bg-red"></span>
                                                    </label>
                                                </div>
                                                <div class="col-auto">
                                                    <label class="form-colorinput">
                                                        <input name="color" type="radio" value="orange"
                                                               class="form-colorinput-input"/>
                                                        <span class="form-colorinput-color bg-orange"></span>
                                                    </label>
                                                </div>
                                                <div class="col-auto">
                                                    <label class="form-colorinput">
                                                        <input name="color" type="radio" value="yellow"
                                                               class="form-colorinput-input"/>
                                                        <span class="form-colorinput-color bg-yellow"></span>
                                                    </label>
                                                </div>
                                                <div class="col-auto">
                                                    <label class="form-colorinput">
                                                        <input name="color" type="radio" value="lime"
                                                               class="form-colorinput-input"/>
                                                        <span class="form-colorinput-color bg-lime"></span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Color Input<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row g-2"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span
                                    class="s">"radio"</span> <span class="na">value=</span><span class="s">"dark"</span> <span
                                    class="na">class=</span><span class="s">"form-colorinput-input"</span> <span
                                    class="nt">/&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-colorinput-color bg-dark"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput form-colorinput-light"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span
                                    class="s">"radio"</span> <span class="na">value=</span><span
                                    class="s">"white"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span>  <span
                                    class="na">checked</span><span class="nt">/&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-colorinput-color bg-white"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span
                                    class="s">"radio"</span> <span class="na">value=</span><span class="s">"blue"</span> <span
                                    class="na">class=</span><span class="s">"form-colorinput-input"</span> <span
                                    class="nt">/&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-colorinput-color bg-blue"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span
                                    class="s">"radio"</span> <span class="na">value=</span><span
                                    class="s">"azure"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span
                                    class="nt">/&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-colorinput-color bg-azure"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span
                                    class="s">"radio"</span> <span class="na">value=</span><span
                                    class="s">"indigo"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span
                                    class="nt">/&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-colorinput-color bg-indigo"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span
                                    class="s">"radio"</span> <span class="na">value=</span><span
                                    class="s">"purple"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span
                                    class="nt">/&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-colorinput-color bg-purple"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span
                                    class="s">"radio"</span> <span class="na">value=</span><span class="s">"pink"</span> <span
                                    class="na">class=</span><span class="s">"form-colorinput-input"</span> <span
                                    class="nt">/&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-colorinput-color bg-pink"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span
                                    class="s">"radio"</span> <span class="na">value=</span><span class="s">"red"</span> <span
                                    class="na">class=</span><span class="s">"form-colorinput-input"</span> <span
                                    class="nt">/&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-colorinput-color bg-red"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span
                                    class="s">"radio"</span> <span class="na">value=</span><span
                                    class="s">"orange"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span
                                    class="nt">/&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-colorinput-color bg-orange"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span
                                    class="s">"radio"</span> <span class="na">value=</span><span
                                    class="s">"yellow"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span
                                    class="nt">/&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-colorinput-color bg-yellow"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span
                                    class="s">"radio"</span> <span class="na">value=</span><span class="s">"lime"</span> <span
                                    class="na">class=</span><span class="s">"form-colorinput-input"</span> <span
                                    class="nt">/&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-colorinput-color bg-lime"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
      <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="input-color-picker">Input color picker</h2>
                                <p>Add an color picker to your form to let users customise it according to their
                                    preferences.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <label class="form-label">Color picker</label>
                                            <input type="color" class="form-control form-control-color" value="#206bc4"
                                                   title="Choose your color"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Color picker<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"color"</span> <span
                                    class="na">class=</span><span
                                    class="s">"form-control form-control-color"</span> <span
                                    class="na">value=</span><span class="s">"#206bc4"</span> <span
                                    class="na">title=</span><span class="s">"Choose your color"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="datalists">Datalists</h2>
                                <p>Use the <code class="language-plaintext highlighter-rouge">datalist</code> element to
                                    add an autocomplete feature to your input control. The list of available options
                                    will display once a user starts to type and will make it quicker to complete form
                                    sections.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <label class="form-label">Datalist example</label>
                                            <input class="form-control" list="datalistOptions"
                                                   placeholder="Type to search..."/>
                                            <datalist id="datalistOptions">
                                                <option value="Aruba"/>
                                                <option value="Afghanistan"/>
                                                <option value="Angola"/>
                                                <option value="Anguilla"/>
                                                <option value="Albania"/>
                                                <option value="Andorra"/>
                                                <option value="United Arab Emirates"/>
                                                <option value="Argentina"/>
                                                <option value="Armenia"/>
                                                <option value="American Samoa"/>
                                            </datalist>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Datalist example<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span
                                    class="na">list=</span><span class="s">"datalistOptions"</span> <span class="na">placeholder=</span><span
                                    class="s">"Type to search..."</span><span class="nt">/&gt;</span>
  <span class="nt">&lt;datalist</span> <span class="na">id=</span><span class="s">"datalistOptions"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Aruba"</span><span class="nt">/&gt;</span>
    <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Afghanistan"</span><span
                                    class="nt">/&gt;</span>
    <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Angola"</span><span class="nt">/&gt;</span>
    <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Anguilla"</span><span class="nt">/&gt;</span>
    <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Albania"</span><span class="nt">/&gt;</span>
    <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Andorra"</span><span class="nt">/&gt;</span>
    <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"United Arab Emirates"</span><span
                                    class="nt">/&gt;</span>
    <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Argentina"</span><span class="nt">/&gt;</span>
    <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"Armenia"</span><span class="nt">/&gt;</span>
    <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"American Samoa"</span><span
                                    class="nt">/&gt;</span>
  <span class="nt">&lt;/datalist&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="custom-selectboxes">Custom selectboxes</h2>
                                <p>Add selectboxes to make your form more intuitive by providing users with a set of
                                    options to choose from. You can add simple selectboxes with a label, use icons only
                                    or icons with labels. Alternatively, you can use pill selectboxes if they go well
                                    with your design.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <label class="form-label">Simple selectgroup</label>
                                            <div class="form-selectgroup">
                                                <label class="form-selectgroup-item">
                                                    <input type="checkbox" name="name" value="HTML"
                                                           class="form-selectgroup-input" checked=""/>
                                                    <span class="form-selectgroup-label">HTML</span>
                                                </label>
                                                <label class="form-selectgroup-item">
                                                    <input type="checkbox" name="name" value="CSS"
                                                           class="form-selectgroup-input"/>
                                                    <span class="form-selectgroup-label">CSS</span>
                                                </label>
                                                <label class="form-selectgroup-item">
                                                    <input type="checkbox" name="name" value="PHP"
                                                           class="form-selectgroup-input"/>
                                                    <span class="form-selectgroup-label">PHP</span>
                                                </label>
                                                <label class="form-selectgroup-item">
                                                    <input type="checkbox" name="name" value="JavaScript"
                                                           class="form-selectgroup-input"/>
                                                    <span class="form-selectgroup-label">JavaScript</span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Icon input</label>
                                            <div class="form-selectgroup">
                                                <label class="form-selectgroup-item">
                                                    <input type="checkbox" name="name" value="sun"
                                                           class="form-selectgroup-input" checked=""/>
                                                    <span class="form-selectgroup-label"><svg
                                                            xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                            height="24" viewBox="0 0 24 24" stroke-width="2"
                                                            stroke="currentColor" fill="none" stroke-linecap="round"
                                                            stroke-linejoin="round"><path stroke="none"
                                                                                          d="M0 0h24v24H0z"
                                                                                          fill="none"/><circle cx="12"
                                                                                                               cy="12"
                                                                                                               r="4"/><path
                                                            d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"/></svg>
                              </span>
                                                </label>
                                                <label class="form-selectgroup-item">
                                                    <input type="checkbox" name="name" value="moon"
                                                           class="form-selectgroup-input"/>
                                                    <span class="form-selectgroup-label"><svg
                                                            xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                            height="24" viewBox="0 0 24 24" stroke-width="2"
                                                            stroke="currentColor" fill="none" stroke-linecap="round"
                                                            stroke-linejoin="round"><path stroke="none"
                                                                                          d="M0 0h24v24H0z"
                                                                                          fill="none"/><path
                                                            d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"/></svg>
                              </span>
                                                </label>
                                                <label class="form-selectgroup-item">
                                                    <input type="checkbox" name="name" value="cloud-rain"
                                                           class="form-selectgroup-input"/>
                                                    <span class="form-selectgroup-label"><svg
                                                            xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                            height="24" viewBox="0 0 24 24" stroke-width="2"
                                                            stroke="currentColor" fill="none" stroke-linecap="round"
                                                            stroke-linejoin="round"><path stroke="none"
                                                                                          d="M0 0h24v24H0z"
                                                                                          fill="none"/><path
                                                            d="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7"/><path
                                                            d="M11 13v2m0 3v2m4 -5v2m0 3v2"/></svg>
                              </span>
                                                </label>
                                                <label class="form-selectgroup-item">
                                                    <input type="checkbox" name="name" value="cloud"
                                                           class="form-selectgroup-input"/>
                                                    <span class="form-selectgroup-label"><svg
                                                            xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                                                            height="24" viewBox="0 0 24 24" stroke-width="2"
                                                            stroke="currentColor" fill="none" stroke-linecap="round"
                                                            stroke-linejoin="round"><path stroke="none"
                                                                                          d="M0 0h24v24H0z"
                                                                                          fill="none"/><path
                                                            d="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-12"/></svg>
                              </span>
                                                </label>
                                                <label class="form-selectgroup-item">
                                                    <input type="checkbox" name="name" value="Other"
                                                           class="form-selectgroup-input"/>
                                                    <span class="form-selectgroup-label">Other</span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Selectgroup with icons and text</label>
                                            <div class="form-selectgroup">
                                                <label class="form-selectgroup-item">
                                                    <input type="radio" name="icons" value="home"
                                                           class="form-selectgroup-input" checked=""/>
                                                    <span class="form-selectgroup-label"><svg
                                                            xmlns="http://www.w3.org/2000/svg" class="icon me-1"
                                                            width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
                                                            stroke="currentColor" fill="none" stroke-linecap="round"
                                                            stroke-linejoin="round"><path stroke="none"
                                                                                          d="M0 0h24v24H0z"
                                                                                          fill="none"/><polyline
                                                            points="5 12 3 12 12 3 21 12 19 12"/><path
                                                            d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"/><path
                                                            d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"/></svg>
                                Home</span>
                                                </label>
                                                <label class="form-selectgroup-item">
                                                    <input type="radio" name="icons" value="user"
                                                           class="form-selectgroup-input"/>
                                                    <span class="form-selectgroup-label"><svg
                                                            xmlns="http://www.w3.org/2000/svg" class="icon me-1"
                                                            width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
                                                            stroke="currentColor" fill="none" stroke-linecap="round"
                                                            stroke-linejoin="round"><path stroke="none"
                                                                                          d="M0 0h24v24H0z"
                                                                                          fill="none"/><circle cx="12"
                                                                                                               cy="7"
                                                                                                               r="4"/><path
                                                            d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/></svg>
                                User</span>
                                                </label>
                                                <label class="form-selectgroup-item">
                                                    <input type="radio" name="icons" value="circle"
                                                           class="form-selectgroup-input"/>
                                                    <span class="form-selectgroup-label"><svg
                                                            xmlns="http://www.w3.org/2000/svg" class="icon me-1"
                                                            width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
                                                            stroke="currentColor" fill="none" stroke-linecap="round"
                                                            stroke-linejoin="round"><path stroke="none"
                                                                                          d="M0 0h24v24H0z"
                                                                                          fill="none"/><circle cx="12"
                                                                                                               cy="12"
                                                                                                               r="9"/></svg>
                                Circle</span>
                                                </label>
                                                <label class="form-selectgroup-item">
                                                    <input type="radio" name="icons" value="square"
                                                           class="form-selectgroup-input"/>
                                                    <span class="form-selectgroup-label"><svg
                                                            xmlns="http://www.w3.org/2000/svg" class="icon me-1"
                                                            width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
                                                            stroke="currentColor" fill="none" stroke-linecap="round"
                                                            stroke-linejoin="round"><path stroke="none"
                                                                                          d="M0 0h24v24H0z"
                                                                                          fill="none"/><rect x="4" y="4"
                                                                                                             width="16"
                                                                                                             height="16"
                                                                                                             rx="2"/></svg>
                                Square</span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Different style</label>
                                            <div class="form-selectgroup form-selectgroup-pills">
                                                <label class="form-selectgroup-item">
                                                    <input type="checkbox" name="name" value="HTML"
                                                           class="form-selectgroup-input" checked=""/>
                                                    <span class="form-selectgroup-label">HTML</span>
                                                </label>
                                                <label class="form-selectgroup-item">
                                                    <input type="checkbox" name="name" value="CSS"
                                                           class="form-selectgroup-input"/>
                                                    <span class="form-selectgroup-label">CSS</span>
                                                </label>
                                                <label class="form-selectgroup-item">
                                                    <input type="checkbox" name="name" value="PHP"
                                                           class="form-selectgroup-input"/>
                                                    <span class="form-selectgroup-label">PHP</span>
                                                </label>
                                                <label class="form-selectgroup-item">
                                                    <input type="checkbox" name="name" value="JavaScript"
                                                           class="form-selectgroup-input"/>
                                                    <span class="form-selectgroup-label">JavaScript</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Simple selectgroup<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span
                                    class="s">"name"</span> <span class="na">value=</span><span class="s">"HTML"</span> <span
                                    class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span
                                    class="na">checked</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span>HTML<span
                                    class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span
                                    class="s">"name"</span> <span class="na">value=</span><span
                                    class="s">"CSS"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span>CSS<span
                                    class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span
                                    class="s">"name"</span> <span class="na">value=</span><span
                                    class="s">"PHP"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span>PHP<span
                                    class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span
                                    class="s">"name"</span> <span class="na">value=</span><span
                                    class="s">"JavaScript"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span>JavaScript<span
                                    class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Icon input<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span
                                    class="s">"name"</span> <span class="na">value=</span><span
                                    class="s">"sun"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span
                                    class="na">checked</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span
                                    class="c">&lt;!-- SVG icon code --&gt;</span>
      <span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span
                                    class="s">"name"</span> <span class="na">value=</span><span class="s">"moon"</span> <span
                                    class="na">class=</span><span class="s">"form-selectgroup-input"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span
                                    class="c">&lt;!-- SVG icon code --&gt;</span>
      <span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span
                                    class="s">"name"</span> <span class="na">value=</span><span
                                    class="s">"cloud-rain"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span
                                    class="c">&lt;!-- SVG icon code --&gt;</span>
      <span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span
                                    class="s">"name"</span> <span class="na">value=</span><span class="s">"cloud"</span> <span
                                    class="na">class=</span><span class="s">"form-selectgroup-input"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span
                                    class="c">&lt;!-- SVG icon code --&gt;</span>
      <span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span
                                    class="s">"name"</span> <span class="na">value=</span><span class="s">"Other"</span> <span
                                    class="na">class=</span><span class="s">"form-selectgroup-input"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span>Other<span
                                    class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Selectgroup with icons and text<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span
                                    class="s">"icons"</span> <span class="na">value=</span><span class="s">"home"</span> <span
                                    class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span
                                    class="na">checked</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span
                                    class="c">&lt;!-- SVG icon code with class="me-1" --&gt;</span>
        Home<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span
                                    class="s">"icons"</span> <span class="na">value=</span><span class="s">"user"</span> <span
                                    class="na">class=</span><span class="s">"form-selectgroup-input"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span
                                    class="c">&lt;!-- SVG icon code with class="me-1" --&gt;</span>
        User<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span
                                    class="s">"icons"</span> <span class="na">value=</span><span
                                    class="s">"circle"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span
                                    class="c">&lt;!-- SVG icon code with class="me-1" --&gt;</span>
        Circle<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span
                                    class="s">"icons"</span> <span class="na">value=</span><span
                                    class="s">"square"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span
                                    class="c">&lt;!-- SVG icon code with class="me-1" --&gt;</span>
        Square<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Different style<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup form-selectgroup-pills"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span
                                    class="s">"name"</span> <span class="na">value=</span><span class="s">"HTML"</span> <span
                                    class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span
                                    class="na">checked</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span>HTML<span
                                    class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span
                                    class="s">"name"</span> <span class="na">value=</span><span
                                    class="s">"CSS"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span>CSS<span
                                    class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span
                                    class="s">"name"</span> <span class="na">value=</span><span
                                    class="s">"PHP"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span>PHP<span
                                    class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span
                                    class="s">"name"</span> <span class="na">value=</span><span
                                    class="s">"JavaScript"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span>JavaScript<span
                                    class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="advanced-selectboxes">Advanced selectboxes</h2>
                                <p>Use more advanced selectboxes to display the range of available options. You can
                                    choose selectboxes with radio buttons, if you want users to select only one option
                                    or with checkboxes, if they are allowed to choose multiple options.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <label class="form-label">Payment method</label>
                                            <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
                                                <label class="form-selectgroup-item flex-fill">
                                                    <input type="radio" name="form-payment" value="visa"
                                                           class="form-selectgroup-input"/>
                                                    <div class="form-selectgroup-label d-flex align-items-center p-3">
                                                        <div class="me-3">
                                                            <span class="form-selectgroup-check"></span>
                                                        </div>
                                                        <div>
                                                            <span class="payment payment-provider-visa payment-xs me-2"></span>
                                                            ending in <strong>7998</strong>
                                                        </div>
                                                    </div>
                                                </label>
                                                <label class="form-selectgroup-item flex-fill">
                                                    <input type="radio" name="form-payment" value="mastercard"
                                                           class="form-selectgroup-input" checked=""/>
                                                    <div class="form-selectgroup-label d-flex align-items-center p-3">
                                                        <div class="me-3">
                                                            <span class="form-selectgroup-check"></span>
                                                        </div>
                                                        <div>
                                                            <span class="payment payment-provider-mastercard payment-xs me-2"></span>
                                                            ending in <strong>2807</strong>
                                                        </div>
                                                    </div>
                                                </label>
                                                <label class="form-selectgroup-item flex-fill">
                                                    <input type="radio" name="form-payment" value="paypal"
                                                           class="form-selectgroup-input"/>
                                                    <div class="form-selectgroup-label d-flex align-items-center p-3">
                                                        <div class="me-3">
                                                            <span class="form-selectgroup-check"></span>
                                                        </div>
                                                        <div>
                                                            <span class="payment payment-provider-paypal payment-xs me-2"></span>
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">Project Manager</label>
                                            <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
                                                <label class="form-selectgroup-item flex-fill">
                                                    <input type="checkbox" name="form-project-manager[]" value="1"
                                                           class="form-selectgroup-input"/>
                                                    <div class="form-selectgroup-label d-flex align-items-center p-3">
                                                        <div class="me-3">
                                                            <span class="form-selectgroup-check"></span>
                                                        </div>
                                                        <div class="form-selectgroup-label-content d-flex align-items-center">
                                                            <span class="avatar me-3"
                                                                  style="background-image: url(../static/avatars/000m.jpg)"></span>
                                                            <div>
                                                                <div class="font-weight-medium">Paweł Kuna</div>
                                                                <div class="text-muted">UI Designer</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </label>
                                                <label class="form-selectgroup-item flex-fill">
                                                    <input type="checkbox" name="form-project-manager[]" value="2"
                                                           class="form-selectgroup-input" checked=""/>
                                                    <div class="form-selectgroup-label d-flex align-items-center p-3">
                                                        <div class="me-3">
                                                            <span class="form-selectgroup-check"></span>
                                                        </div>
                                                        <div class="form-selectgroup-label-content d-flex align-items-center">
                                                            <span class="avatar me-3">JL</span>
                                                            <div>
                                                                <div class="font-weight-medium">Jeffie Lewzey</div>
                                                                <div class="text-muted">Chemical Engineer</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </label>
                                                <label class="form-selectgroup-item flex-fill">
                                                    <input type="checkbox" name="form-project-manager[]" value="3"
                                                           class="form-selectgroup-input"/>
                                                    <div class="form-selectgroup-label d-flex align-items-center p-3">
                                                        <div class="me-3">
                                                            <span class="form-selectgroup-check"></span>
                                                        </div>
                                                        <div class="form-selectgroup-label-content d-flex align-items-center">
                                                            <span class="avatar me-3"
                                                                  style="background-image: url(../static/avatars/002m.jpg)"></span>
                                                            <div>
                                                                <div class="font-weight-medium">Mallory Hulme</div>
                                                                <div class="text-muted">Geologist IV</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </label>
                                                <label class="form-selectgroup-item flex-fill">
                                                    <input type="checkbox" name="form-project-manager[]" value="4"
                                                           class="form-selectgroup-input"/>
                                                    <div class="form-selectgroup-label d-flex align-items-center p-3">
                                                        <div class="me-3">
                                                            <span class="form-selectgroup-check"></span>
                                                        </div>
                                                        <div class="form-selectgroup-label-content d-flex align-items-center">
                                                            <span class="avatar me-3"
                                                                  style="background-image: url(../static/avatars/003m.jpg)"></span>
                                                            <div>
                                                                <div class="font-weight-medium">Dunn Slane</div>
                                                                <div class="text-muted">Research Nurse</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </label>
                                                <label class="form-selectgroup-item flex-fill">
                                                    <input type="checkbox" name="form-project-manager[]" value="5"
                                                           class="form-selectgroup-input"/>
                                                    <div class="form-selectgroup-label d-flex align-items-center p-3">
                                                        <div class="me-3">
                                                            <span class="form-selectgroup-check"></span>
                                                        </div>
                                                        <div class="form-selectgroup-label-content d-flex align-items-center">
                                                            <span class="avatar me-3"
                                                                  style="background-image: url(../static/avatars/000f.jpg)"></span>
                                                            <div>
                                                                <div class="font-weight-medium">Emmy Levet</div>
                                                                <div class="text-muted">VP Product Management</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Payment method<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup form-selectgroup-boxes d-flex flex-column"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-item flex-fill"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span
                                    class="s">"form-payment"</span> <span class="na">value=</span><span
                                    class="s">"visa"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label d-flex align-items-center p-3"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"me-3"</span><span
                                    class="nt">&gt;</span>
          <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div&gt;</span>
          <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-visa payment-xs me-2"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
          ending in <span class="nt">&lt;strong&gt;</span>7998<span class="nt">&lt;/strong&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-item flex-fill"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span
                                    class="s">"form-payment"</span> <span class="na">value=</span><span class="s">"mastercard"</span> <span
                                    class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span
                                    class="na">checked</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label d-flex align-items-center p-3"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"me-3"</span><span
                                    class="nt">&gt;</span>
          <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div&gt;</span>
          <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-mastercard payment-xs me-2"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
          ending in <span class="nt">&lt;strong&gt;</span>2807<span class="nt">&lt;/strong&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-item flex-fill"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span
                                    class="s">"form-payment"</span> <span class="na">value=</span><span class="s">"paypal"</span> <span
                                    class="na">class=</span><span class="s">"form-selectgroup-input"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label d-flex align-items-center p-3"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"me-3"</span><span
                                    class="nt">&gt;</span>
          <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div&gt;</span>
          <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-paypal payment-xs me-2"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Project Manager<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup form-selectgroup-boxes d-flex flex-column"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-item flex-fill"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span
                                    class="s">"form-project-manager[]"</span> <span class="na">value=</span><span
                                    class="s">"1"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label d-flex align-items-center p-3"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"me-3"</span><span
                                    class="nt">&gt;</span>
          <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label-content d-flex align-items-center"</span><span
                                    class="nt">&gt;</span>
          <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar me-3"</span> <span
                                    class="na">style=</span><span class="s">"background-image: url(...)"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
          <span class="nt">&lt;div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span
                                    class="s">"font-weight-medium"</span><span class="nt">&gt;</span>Paweł Kuna<span
                                    class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span
                                    class="nt">&gt;</span>UI Designer<span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-item flex-fill"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span
                                    class="s">"form-project-manager[]"</span> <span class="na">value=</span><span
                                    class="s">"2"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span>  <span
                                    class="na">checked</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label d-flex align-items-center p-3"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"me-3"</span><span
                                    class="nt">&gt;</span>
          <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label-content d-flex align-items-center"</span><span
                                    class="nt">&gt;</span>
          <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar me-3"</span><span
                                    class="nt">&gt;</span>JL<span class="nt">&lt;/span&gt;</span>
          <span class="nt">&lt;div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span
                                    class="s">"font-weight-medium"</span><span class="nt">&gt;</span>Jeffie Lewzey<span
                                    class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span
                                    class="nt">&gt;</span>Chemical Engineer<span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-item flex-fill"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span
                                    class="s">"form-project-manager[]"</span> <span class="na">value=</span><span
                                    class="s">"3"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label d-flex align-items-center p-3"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"me-3"</span><span
                                    class="nt">&gt;</span>
          <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label-content d-flex align-items-center"</span><span
                                    class="nt">&gt;</span>
          <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar me-3"</span> <span
                                    class="na">style=</span><span class="s">"background-image: url(...)"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
          <span class="nt">&lt;div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span
                                    class="s">"font-weight-medium"</span><span class="nt">&gt;</span>Mallory Hulme<span
                                    class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span
                                    class="nt">&gt;</span>Geologist IV<span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-item flex-fill"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span
                                    class="s">"form-project-manager[]"</span> <span class="na">value=</span><span
                                    class="s">"4"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label d-flex align-items-center p-3"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"me-3"</span><span
                                    class="nt">&gt;</span>
          <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label-content d-flex align-items-center"</span><span
                                    class="nt">&gt;</span>
          <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar me-3"</span> <span
                                    class="na">style=</span><span class="s">"background-image: url(...)"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
          <span class="nt">&lt;div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span
                                    class="s">"font-weight-medium"</span><span class="nt">&gt;</span>Dunn Slane<span
                                    class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span
                                    class="nt">&gt;</span>Research Nurse<span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span
                                    class="s">"form-selectgroup-item flex-fill"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span
                                    class="s">"form-project-manager[]"</span> <span class="na">value=</span><span
                                    class="s">"5"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label d-flex align-items-center p-3"</span><span
                                    class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"me-3"</span><span
                                    class="nt">&gt;</span>
          <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label-content d-flex align-items-center"</span><span
                                    class="nt">&gt;</span>
          <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar me-3"</span> <span
                                    class="na">style=</span><span class="s">"background-image: url(...)"</span><span
                                    class="nt">&gt;&lt;/span&gt;</span>
          <span class="nt">&lt;div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span
                                    class="s">"font-weight-medium"</span><span class="nt">&gt;</span>Emmy Levet<span
                                    class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span
                                    class="nt">&gt;</span>VP Product Management<span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="toggle-switches">Toggle switches</h2>
                                <p>Use toggle switches for the elements of your form which require choosing between two
                                    opposing states.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <div class="form-label">Toggle switches</div>
                                            <label class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" checked=""/>
                                                <span class="form-check-label">Option 1</span>
                                            </label>
                                            <label class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox"/>
                                                <span class="form-check-label">Option 2</span>
                                            </label>
                                            <label class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox"/>
                                                <span class="form-check-label">Option 3</span>
                                            </label>
                                        </div>
                                        <div class="mb-3">
                                            <div class="form-label">Single switch</div>
                                            <label class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox"/>
                                                <span class="form-check-label">I agree with terms and conditions</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-label"</span><span
                                    class="nt">&gt;</span>Toggle switches<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check form-switch"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span
                                    class="na">type=</span><span class="s">"checkbox"</span> <span
                                    class="na">checked</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span
                                    class="nt">&gt;</span>Option 1<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check form-switch"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span
                                    class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span
                                    class="nt">&gt;</span>Option 2<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check form-switch"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span
                                    class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span
                                    class="nt">&gt;</span>Option 3<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-label"</span><span
                                    class="nt">&gt;</span>Single switch<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check form-switch"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span
                                    class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span
                                    class="nt">&gt;</span>I agree with terms and conditions<span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="radios">Radios</h2>
                                <p>Use radio buttons for the parts of your form which require users to choose one option
                                    from a set of two or more mutually exclusive options.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <div class="form-label">Radios</div>
                                            <div>
                                                <label class="form-check">
                                                    <input class="form-check-input" type="radio" checked=""/>
                                                    <span class="form-check-label">Option 1</span>
                                                </label>
                                                <label class="form-check">
                                                    <input class="form-check-input" type="radio"/>
                                                    <span class="form-check-label">Option 2</span>
                                                </label>
                                                <label class="form-check">
                                                    <input class="form-check-input" type="radio" disabled=""/>
                                                    <span class="form-check-label">Option 3</span>
                                                </label>
                                                <label class="form-check">
                                                    <input class="form-check-input" type="radio" checked=""
                                                           disabled=""/>
                                                    <span class="form-check-label">Option 4</span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <div class="form-label">Inline Radios</div>
                                            <div>
                                                <label class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" checked=""/>
                                                    <span class="form-check-label">Option 1</span>
                                                </label>
                                                <label class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio"/>
                                                    <span class="form-check-label">Option 2</span>
                                                </label>
                                                <label class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" disabled=""/>
                                                    <span class="form-check-label">Option 3</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-label"</span><span
                                    class="nt">&gt;</span>Radios<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span
                                    class="na">type=</span><span class="s">"radio"</span> <span
                                    class="na">checked</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span
                                    class="nt">&gt;</span>Option 1<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span
                                    class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span
                                    class="nt">&gt;</span>Option 2<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span
                                    class="na">type=</span><span class="s">"radio"</span> <span
                                    class="na">disabled</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span
                                    class="nt">&gt;</span>Option 3<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span
                                    class="na">type=</span><span class="s">"radio"</span> <span
                                    class="na">checked</span> <span class="na">disabled</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span
                                    class="nt">&gt;</span>Option 4<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-label"</span><span
                                    class="nt">&gt;</span>Inline Radios<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span
                                    class="s">"form-check form-check-inline"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span
                                    class="na">type=</span><span class="s">"radio"</span> <span
                                    class="na">checked</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span
                                    class="nt">&gt;</span>Option 1<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span
                                    class="s">"form-check form-check-inline"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span
                                    class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span
                                    class="nt">&gt;</span>Option 2<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span
                                    class="s">"form-check form-check-inline"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span
                                    class="na">type=</span><span class="s">"radio"</span> <span
                                    class="na">disabled</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span
                                    class="nt">&gt;</span>Option 3<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="checkboxes">Checkboxes</h2>
                                <p>Use checkoxes if you want to allow users to select more than one option from a set of
                                    predefined options or to turn an option on or off.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <div class="form-label">Checkboxes</div>
                                            <div>
                                                <label class="form-check">
                                                    <input class="form-check-input" type="checkbox"/>
                                                    <span class="form-check-label">Checkbox input</span>
                                                </label>
                                                <label class="form-check">
                                                    <input class="form-check-input" type="checkbox" disabled=""/>
                                                    <span class="form-check-label">Disabled checkbox input</span>
                                                </label>
                                                <label class="form-check">
                                                    <input class="form-check-input" type="checkbox" checked=""/>
                                                    <span class="form-check-label">Checked checkbox input</span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <div class="form-label">Inline Checkboxes</div>
                                            <div>
                                                <label class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox"/>
                                                    <span class="form-check-label">Option 1</span>
                                                </label>
                                                <label class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" disabled=""/>
                                                    <span class="form-check-label">Option 2</span>
                                                </label>
                                                <label class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" checked=""/>
                                                    <span class="form-check-label">Option 3</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-label"</span><span
                                    class="nt">&gt;</span>Checkboxes<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span
                                    class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span
                                    class="nt">&gt;</span>Checkbox input<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span
                                    class="na">type=</span><span class="s">"checkbox"</span> <span
                                    class="na">disabled</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span
                                    class="nt">&gt;</span>Disabled checkbox input<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span
                                    class="na">type=</span><span class="s">"checkbox"</span> <span
                                    class="na">checked</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span
                                    class="nt">&gt;</span>Checked checkbox input<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-label"</span><span
                                    class="nt">&gt;</span>Inline Checkboxes<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span
                                    class="s">"form-check form-check-inline"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span
                                    class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span
                                    class="nt">&gt;</span>Option 1<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span
                                    class="s">"form-check form-check-inline"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span
                                    class="na">type=</span><span class="s">"checkbox"</span> <span
                                    class="na">disabled</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span
                                    class="nt">&gt;</span>Option 2<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span
                                    class="s">"form-check form-check-inline"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span
                                    class="na">type=</span><span class="s">"checkbox"</span> <span
                                    class="na">checked</span><span class="nt">&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span
                                    class="nt">&gt;</span>Option 3<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="range-input">Range input</h2>
                                <p>Add a range slider to make it possible for users to set a value or range, such as a
                                    price range or a time frame.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <label class="form-label">Range input</label>
                                            <input type="range" class="form-range mb-2" value="40" min="0" max="100"
                                                   step="10"/>
                                            <div class="form-range mb-2" id="range-simple"></div>
                                            <div class="form-range mb-2" id="range-connect"></div>
                                            <div class="form-range mb-2 text-green" id="range-color"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Range input<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"range"</span> <span
                                    class="na">class=</span><span class="s">"form-range mb-2"</span> <span class="na">value=</span><span
                                    class="s">"40"</span> <span class="na">min=</span><span class="s">"0"</span> <span
                                    class="na">max=</span><span class="s">"100"</span> <span
                                    class="na">step=</span><span class="s">"10"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-range mb-2"</span> <span
                                    class="na">id=</span><span class="s">"range-simple"</span><span class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-range mb-2"</span> <span
                                    class="na">id=</span><span class="s">"range-connect"</span><span class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span
                                    class="s">"form-range mb-2 text-green"</span> <span class="na">id=</span><span
                                    class="s">"range-color"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="fieldset">Fieldset</h2>
                                <p>Group parts of your form to make it well-structured and clearer for users, using the
                                    <code class="language-plaintext highlighter-rouge">fieldset</code> element.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <fieldset class="form-fieldset">
                                            <div class="mb-3">
                                                <label class="form-label required">Full name</label>
                                                <input type="text" class="form-control" autocomplete="off"/>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label required">Company</label>
                                                <input type="text" class="form-control" autocomplete="off"/>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label required">Email</label>
                                                <input type="email" class="form-control" autocomplete="off"/>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">Phone number</label>
                                                <input type="tel" class="form-control" autocomplete="off"/>
                                            </div>
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input"/>
                                                <label class="form-check-label required">I agree to the Terms &amp;
                                                    Conditions</label>
                                            </div>
                                        </fieldset>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;fieldset</span> <span
                                class="na">class=</span><span class="s">"form-fieldset"</span><span
                                class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label required"</span><span
                                    class="nt">&gt;</span>Full name<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span class="s">"form-control"</span> <span class="na">autocomplete=</span><span
                                    class="s">"off"</span><span class="nt">/&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label required"</span><span
                                    class="nt">&gt;</span>Company<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span class="s">"form-control"</span>  <span class="na">autocomplete=</span><span
                                    class="s">"off"</span><span class="nt">/&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label required"</span><span
                                    class="nt">&gt;</span>Email<span class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span
                                    class="s">"form-control"</span>  <span class="na">autocomplete=</span><span
                                    class="s">"off"</span><span class="nt">/&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Phone number<span
                                    class="nt">&lt;/label&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"tel"</span> <span
                                    class="na">class=</span><span class="s">"form-control"</span> <span class="na">autocomplete=</span><span
                                    class="s">"off"</span><span class="nt">/&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span
                                    class="s">"form-check-input"</span><span class="nt">/&gt;</span>
    <span class="nt">&lt;label</span> <span class="na">class=</span><span
                                    class="s">"form-check-label required"</span><span class="nt">&gt;</span>I agree to the Terms <span
                                    class="err">&amp;</span> Conditions<span class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/fieldset&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="input-group">Input group</h2>
                                <p>Create a group of input controls and place add-ons on either side of an input.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <label class="form-label">Input group</label>
                                            <div class="input-group mb-2">
                            <span class="input-group-text">
                              @
                            </span>
                                                <input type="text" class="form-control" placeholder="username"
                                                       autocomplete="off"/>
                                            </div>
                                            <div class="input-group mb-2">
                                                <input type="text" class="form-control" placeholder="subdomain"
                                                       autocomplete="off"/>
                                                <span class="input-group-text">
                              .tabler.io
                            </span>
                                            </div>
                                            <div class="input-group">
                            <span class="input-group-text">
                              https://
                            </span>
                                                <input type="text" class="form-control" placeholder="subdomain"
                                                       autocomplete="off"/>
                                                <span class="input-group-text">
                              .tabler.io
                            </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Input group<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group mb-2"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span
                                    class="nt">&gt;</span>
      @
    <span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span class="s">"form-control"</span>  <span class="na">placeholder=</span><span
                                    class="s">"username"</span>  <span class="na">autocomplete=</span><span class="s">"off"</span><span
                                    class="nt">&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group mb-2"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span class="s">"form-control"</span>  <span class="na">placeholder=</span><span
                                    class="s">"subdomain"</span>  <span class="na">autocomplete=</span><span class="s">"off"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span
                                    class="nt">&gt;</span>
      .tabler.io
    <span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span
                                    class="nt">&gt;</span>
      https://
    <span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span class="s">"form-control"</span>  <span class="na">placeholder=</span><span
                                    class="s">"subdomain"</span>  <span class="na">autocomplete=</span><span class="s">"off"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span
                                    class="nt">&gt;</span>
      .tabler.io
    <span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="input-with-checkboxes-or-radios">Input with checkboxes or radios</h2>
                                <p>Add checkboxes or radio buttons on either side of your input control.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <label class="form-label">Input with checkbox or radios</label>
                                            <div class="input-group mb-2">
                            <span class="input-group-text">
                              <input class="form-check-input m-0" type="checkbox" checked=""/>
                            </span>
                                                <input type="text" class="form-control" autocomplete="off"/>
                                            </div>
                                            <div class="input-group">
                                                <input type="text" class="form-control" autocomplete="off"/>
                                                <span class="input-group-text">
                              <input class="form-check-input m-0" type="radio" checked=""/>
                            </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Input with checkbox or radios<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group mb-2"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">class=</span><span
                                    class="s">"form-check-input m-0"</span> <span class="na">type=</span><span
                                    class="s">"checkbox"</span> <span class="na">checked</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span class="s">"form-control"</span>  <span class="na">autocomplete=</span><span
                                    class="s">"off"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span class="s">"form-control"</span>  <span class="na">autocomplete=</span><span
                                    class="s">"off"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;input</span> <span class="na">class=</span><span
                                    class="s">"form-check-input m-0"</span> <span class="na">type=</span><span
                                    class="s">"radio"</span> <span class="na">checked</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="input-with-prepended-or-appended-text">Input with prepended or appended
                                    text</h2>
                                <p>Add text to your input control, either before or after the text which is to be
                                    entered by a user.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <label class="form-label">Input with prepended text</label>
                                            <div class="input-group input-group-flat mb-2">
                            <span class="input-group-text">
                              https://tabler.io/users/
                            </span>
                                                <input type="text" class="form-control ps-0" value="yourfancyusername"
                                                       autocomplete="off"/>
                                            </div>
                                            <div class="input-group input-group-flat">
                                                <input type="text" class="form-control text-end pe-0"
                                                       value="yourfancydomain" autocomplete="off"/>
                                                <span class="input-group-text">
                              .tabler.io
                            </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Input with prepended text<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span
                                    class="s">"input-group input-group-flat mb-2"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span
                                    class="nt">&gt;</span>
      https://tabler.io/users/
    <span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span class="s">"form-control ps-0"</span>  <span
                                    class="na">value=</span><span class="s">"yourfancyusername"</span> <span class="na">autocomplete=</span><span
                                    class="s">"off"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span
                                    class="s">"input-group input-group-flat"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span class="s">"form-control text-end pe-0"</span>  <span
                                    class="na">value=</span><span class="s">"yourfancydomain"</span> <span class="na">autocomplete=</span><span
                                    class="s">"off"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span
                                    class="nt">&gt;</span>
      .tabler.io
    <span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="input-with-appended-link">Input with appended link</h2>
                                <p>Include a link in your input control to add a clickable element within the
                                    control.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <label class="form-label">Input with appended link</label>
                                            <div class="input-group input-group-flat">
                                                <input type="password" class="form-control" value="ultrastrongpassword"
                                                       autocomplete="off"/>
                                                <span class="input-group-text">
                              <a href="javascript:void(0)" class="input-group-link">Show password</a>
                            </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Input with appended link<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span
                                    class="s">"input-group input-group-flat"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span
                                    class="s">"form-control"</span>  <span class="na">value=</span><span class="s">"ultrastrongpassword"</span> <span
                                    class="na">autocomplete=</span><span class="s">"off"</span><span
                                    class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"input-group-link"</span><span class="nt">&gt;</span>Show password<span
                                    class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                                <h2 id="input-with-appended-icon-links">Input with appended icon links</h2>
                                <p>Add an icon link which you want to display at the end of your input control to
                                    visually represent actions which a user can take.</p>
                                <div class="example no_toc_section">
                                    <div class="example-content">
                                        <div class="mb-3">
                                            <label class="form-label">Input with appended icon links</label>
                                            <div class="input-group input-group-flat">
                                                <input type="text" class="form-control" autocomplete="off"/>
                                                <span class="input-group-text">
                              <a href="javascript:void(0)" class="link-secondary" title="Clear search"
                                 data-bs-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" class="icon"
                                                               width="24" height="24" viewBox="0 0 24 24"
                                                               stroke-width="2" stroke="currentColor" fill="none"
                                                               stroke-linecap="round" stroke-linejoin="round"><path
                                      stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="18" y1="6" x2="6" y2="18"/><line
                                      x1="6" y1="6" x2="18" y2="18"/></svg>
                              </a>
                              <a href="javascript:void(0)" class="link-secondary ms-2" title="Search settings"
                                 data-bs-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" class="icon"
                                                               width="24" height="24" viewBox="0 0 24 24"
                                                               stroke-width="2" stroke="currentColor" fill="none"
                                                               stroke-linecap="round" stroke-linejoin="round"><path
                                      stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="6" cy="10" r="2"/><line
                                      x1="6" y1="4" x2="6" y2="8"/><line x1="6" y1="12" x2="6" y2="20"/><circle cx="12"
                                                                                                                cy="16"
                                                                                                                r="2"/><line
                                      x1="12" y1="4" x2="12" y2="14"/><line x1="12" y1="18" x2="12" y2="20"/><circle
                                      cx="18" cy="7" r="2"/><line x1="18" y1="4" x2="18" y2="5"/><line x1="18" y1="9"
                                                                                                       x2="18" y2="20"/></svg>
                              </a>
                              <a href="javascript:void(0)" class="link-secondary ms-2 disabled" title="Add notification"
                                 data-bs-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" class="icon"
                                                               width="24" height="24" viewBox="0 0 24 24"
                                                               stroke-width="2" stroke="currentColor" fill="none"
                                                               stroke-linecap="round" stroke-linejoin="round"><path
                                      stroke="none" d="M0 0h24v24H0z" fill="none"/><path
                                      d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"/><path
                                      d="M9 17v1a3 3 0 0 0 6 0v-1"/></svg>
                              </a>
                            </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="example-code">
                                    <figure class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span
                                class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Input with appended icon links<span
                                    class="nt">&lt;/label&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span
                                    class="s">"input-group input-group-flat"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span
                                    class="na">class=</span><span class="s">"form-control"</span>  <span class="na">autocomplete=</span><span
                                    class="s">"off"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span
                                    class="nt">&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"link-secondary"</span> <span class="na">title=</span><span
                                    class="s">"Clear search"</span> <span class="na">data-bs-toggle=</span><span
                                    class="s">"tooltip"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
      <span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"link-secondary ms-2"</span> <span
                                    class="na">title=</span><span class="s">"Search settings"</span> <span class="na">data-bs-toggle=</span><span
                                    class="s">"tooltip"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
      <span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span
                                    class="na">class=</span><span class="s">"link-secondary ms-2 disabled"</span> <span
                                    class="na">title=</span><span class="s">"Add notification"</span> <span class="na">data-bs-toggle=</span><span
                                    class="s">"tooltip"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
      <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer footer-transparent d-print-none">
            <div class="container">
                <div class="row text-center align-items-center flex-row-reverse">
                    <div class="col-lg-auto ms-lg-auto">
                        <ul class="list-inline list-inline-dots mb-0">
                            <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a>
                            </li>
                            <li class="list-inline-item"><a href="../license.html" class="link-secondary">License</a>
                            </li>
                            <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank"
                                                            class="link-secondary" rel="noopener">Source code</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                        <ul class="list-inline list-inline-dots mb-0">
                            <li class="list-inline-item">
                                Copyright &copy; 2021
                                <a href=".." class="link-secondary">Tabler</a>.
                                All rights reserved.
                            </li>
                            <li class="list-inline-item">
                                <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.22</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</div>
<!-- Libs JS -->
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../dist/libs/nouislider/distribute/nouislider.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
    // @formatter:off
    noUiSlider.create(document.getElementById('range-simple'), {
        start: 20,
        connect: [true, false],
        step: 10,
        range: {
            min: 0,
            max: 100
        }
    });
    // @formatter:on
</script>
<script>
    // @formatter:off
    noUiSlider.create(document.getElementById('range-connect'), {
        start: [60, 90],
        connect: [false, true, false],
        step: 10,
        range: {
            min: 0,
            max: 100
        }
    });
    // @formatter:on
</script>
<script>
    // @formatter:off
    noUiSlider.create(document.getElementById('range-color'), {
        start: 40,
        connect: [true, false],
        step: 10,
        range: {
            min: 0,
            max: 100
        }
    });
    // @formatter:on
</script>
<script>
    let sliderTriggerList = [].slice.call(document.querySelectorAll("[data-slider]"));
    sliderTriggerList.map(function (sliderTriggerEl) {
        let options = {};
        if (sliderTriggerEl.getAttribute("data-slider")) {
            options = JSON.parse(sliderTriggerEl.getAttribute("data-slider"));
        }
        let slider = noUiSlider.create(sliderTriggerEl, options);
        if (options['js-name']) {
            window[options['js-name']] = slider;
        }
    });
</script>
</body>
</html>
